import React, {Component} from 'react';
import {nanoid} from "nanoid";
import PropTypes from 'prop-types'
import './index.css'

class Header extends Component {
    static propTypes = {
        addTodo: PropTypes.func.isRequired
    }
    handleKeyUp = (e) => {
        if (e.keyCode !== 13) return
        if (e.target.value.trim() === '') {
            alert('输入的值不能为空')
            return;
        }
        this.props.addTodo({
            id: nanoid(),
            name: e.target.value,
            done: false
        })
        e.target.value = ''
    }

    render() {
        return (
            <div className="todo-header">
                <input type="text" onKeyUp={this.handleKeyUp} placeholder="请输入你的任务名称，按回车键确认"/>
            </div>
        );
    }
}

export default Header;